<template>
  <div class="trusteeship">
    <div class="headerBox">
      <van-nav-bar
        title="托管签约"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="coment">
      <van-tabs v-model="active" animated sticky>
        <van-tab title="待签约">
          <div class="com_box">
            <div class="info_box">
              <div class="top_info">
                <span>订单号：7642847392</span>
                <span class="time">2019.01.11 12:00:32</span>
              </div>
              <div class="shopping_box">
                <img src="../../assets/img/goods/goods1.png" alt="">
                <div class="rg_box">
                  <h3>云算力PGTEGA</h3>
                  <div class="pic_box">
                    <span>托管T数：X10</span>
                  </div>
                </div>
              </div>
              <div class="btm_info">
                <div class="lf_box">
                  <i class="dot"></i>
                  <span style="color:#F6741F">待签约</span>
                </div>
                <div class="rg_hj">
                  <span>立即签约</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已签约">
            <div class="com_box">
                <div class="info_box">
                    <div class="top_info">
                        <span>订单号：7642847392</span>
                        <span class="time">2019.01.11 12:00:32</span>
                    </div>
                    <div class="shopping_box">
                        <img src="../../assets/img/goods/goods1.png" alt="">
                        <div class="rg_box">
                        <h3>云算力PGTEGA</h3>
                        <div class="pic_box">
                            <span>托管T数：X10</span>
                        </div>
                        </div>
                    </div>
                    <div class="btm_info">
                        <div class="lf_box">
                            <i class="dot dot_one"></i>
                            <span style="color:#333">已完成</span>
                        </div>
                        <div class="rg_hj">
                            <span class="repal">查看详情</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  
  created() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  },
};
</script>

<style scoped>
.com_box{
  padding: 0 .29rem;
  
}
.info_box{
  margin-top: .2rem;
  height: 3.7rem;
  background: #FFFFFF;
  border-radius: .08rem;
}
.top_info,.btm_info{
  height: .66rem;
  line-height: .66rem;
  font-size: .24rem;
  padding: 0 .24rem;
  border-bottom: 1px solid #F5F3F3;
}
.btm_info{
  height: .82rem;
  line-height: .82rem;
  width: 100%;
  border: none;
  border-top: 1px solid #F5F3F3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.time{
  float: right;
  color: #999999;
}
.shopping_box{
  width: 100%;
  padding: .18rem .24rem;
  height: 2.19rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.shopping_box>img{
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .08rem;
}
.rg_box{
  width: 4.5rem;
  padding: .12rem 0;
}
.rg_box > h3 {
  font-size: .32rem;
  margin-bottom: .1rem;
}
.rg_box .alone_pic{
  font-size: .26rem;
}
.rg_box .pic_box{
  margin-top: .64rem;
  color: #999999;
  font-size: .26rem;
}
.btm_info .lf_box{
}
.btm_info .dot{
  display: inline-block;
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: #F6741F;
  margin-right: .1rem;
}
.btm_info .dot_one{
  background: #333333;
}
.btm_info .dot_two{
  background:#8A94A8;
}
.rg_hj{
  width: 5rem;
  text-align: right;
  padding-top: .02rem;
}
.rg_hj > span{
  display: inline-block;
  box-sizing: border-box;
  padding: .1rem .18rem;
  border-radius: .22rem;
  border: .02rem solid #00BDDA;
  color: #00BDDA;
  height: .44rem;
  line-height: .24rem;
  margin-right: .12rem;
}
.rg_hj > span:last-child{
  margin-right: 0;
}
.rg_hj > span.repal{
  border: .02rem solid #8A94A8;
  color: #8A94A8;
}
.rg_hj > span.pay{
  border: .02rem solid #F30F0F;
  color: #F30F0F;
}
</style>